import '@antv/x6-vue-shape'
import { Addon, Graph } from '@antv/x6'
import DataNode from '@/components/WorkPannel/dataNode.vue'

export const startDragToGraph = (graph, item, e) => {
	const node = graph.createNode({
		width: 120, //节点的宽度
		height: 120, //节点的高度
		shape: 'vue-shape',
		// component: 'mynode',
		component: {
			render: () => {
				return <DataNode title={item.title} type={item.type} />
			},
		},
		ports: ports,
	})
	const dnd = new Addon.Dnd({ target: graph })
	dnd.start(node, e)
}

const ports = {
	groups: {
		// 输入链接桩群组定义
		top: {
			position: 'top',
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: '#2D8CF0',
					strokeWidth: 2,
					fill: '#fff',
				},
			},
		},
		// 输出链接桩群组定义
		bottom: {
			position: 'bottom',
			attrs: {
				circle: {
					r: 4,
					magnet: true,
					stroke: '#2D8CF0',
					strokeWidth: 2,
					fill: '#fff',
				},
			},
		},
		// left: {
		// 	position: 'left',
		// 	attrs: {
		// 		circle: {
		// 			r: 4,
		// 			magnet: true,
		// 			stroke: '#2D8CF0',
		// 			strokeWidth: 2,
		// 			fill: '#fff',
		// 		},
		// 	},
		// },
		// right: {
		// 	position: 'right',
		// 	attrs: {
		// 		circle: {
		// 			r: 4,
		// 			magnet: true,
		// 			stroke: '#2D8CF0',
		// 			strokeWidth: 2,
		// 			fill: '#fff',
		// 		},
		// 	},
		// },
	},
	items: [
		{
			id: 'port1',
			group: 'top',
		},
		{
			id: 'port2',
			group: 'bottom',
		},
		// {
		// 	id: 'port3',
		// 	group: 'left',
		// },
		// {
		// 	id: 'port4',
		// 	group: 'right',
		// },
	],
}
